<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>权限分配</title>
<link rel="stylesheet" href="${cxt }/css/xw_limit.css" />
<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
<script type="text/javascript" src="${cxt }/js/iconfont.js"></script>
<script type="text/javascript" src="${cxt }/js/jquery.js"></script>
<script type="text/javascript" src="${cxt }/js/plug.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
	.dis{
		display:none;
	}
	.blo{
		display:block;
	}
	.pointer{
		cursor:pointer;
	}
	/* 为被选中的权限加上标志 */
	.check{
		
	}
	/* 如果权限分配成功，则反馈成功 */
	.dialog{
		position:absolute;
		top:0px;
		right:0px;
		bottom:0px;
		left:0px;
		background:rgba(0,0,0,0);
		z-index:30;
		display:none;
	}
	.suc{
		background: #fff;
		width:240px;
		height:150ox;
		margin-top:240px;
		margin-left:470px;
		border:1px solid #fff;
	}
	.suc h3{
		width: 230px;
		padding:5px 5px;
		margin-bottom:20px;
		background-color:#808080;
	}
	.suc span{
		margin-left:31px;
		margin-top:10px;
		margin-bottom:10px;
	}
	.suc input{
		margin-top:20px;
		background-color:#4BCF99;
		height:30px;
		color:#fff;
		margin-left: 80px;
    	font-size: 16px;
    	width: 70px;
    	margin-bottom:20px;
    	cursor:pointer;
	}
</style>
<script type="text/javascript">
/* 获取用户选择的角色  */
 var role="";
 /* 接受该角色的权限id */
var limit = new Array();
 /* 获取用户重新分配的权限id */
 var allot="";
 /* 获取该员工的姓名 */
 var emp="";
	$(document).ready(function(){
		/* 获取用户选择的角色 */
		$("select#sel").change(function(){
			var idarr = document.getElementsByName("ck");
			for(var i=0;i<idarr.length;i++){
				if(idarr[i].checked){
					$(idarr[i]).parent().removeClass("check");
					$(idarr[i]).prop("checked",false);
				}
			}
			role=$(this).val();
			getRole();
		});
		
		/* 全部打开 */
		$("#open").click(function(){
			$("a").next().removeClass("dis");
			$("a").next().addClass("blo");
		});
		
		/* 全部关闭 */
		$("#close").click(function(){
			$("a").next().removeClass("blo");
			$("a").next().addClass("dis");
		});
		
		/* 关闭提示 */
		$("#warn").click(function(){
			$("#dialog").css("display","none");
		});
	});
	
	/*子菜单显示/隐藏  */
	function change(id){
		var cla = $("#"+id+"1").attr("class");
		if(cla=='dis'){
			$("#"+id+"1").removeClass("dis");
			$("#"+id+"1").addClass("blo");
		}else if(cla=='blo'){
			$("#"+id+"1").removeClass("blo");
			$("#"+id+"1").addClass("dis");
		}
	}
	
	/*判断子标签是否被选中  */
	function chekchil(id){
		var arr = "";
		var larr = new Array();
		var j = $(id).parent().parent().prev().prev().attr("id");
		if($(id).is(":checked")){
			$(id).addClass("check");
			$("#"+j).prop("checked",true);	
		}else if(!$(id).is(":checked")){
			$(id).removeClass("check");
			var c = $(id).parent().parent().attr("id");
			$("#"+c+" li").each(function(){
				arr += $(this).find('input').prop("checked")+",";
			});
			arr = arr.substring(0,arr.length-1);
			larr = arr.split(",");
			for(var x=0;x<larr.length;x++){
				if(larr[x]=='true'){
					$("#"+j).prop("checked",true);
					return;
				}else if(x==larr.length-1){
					$("#"+j).prop("checked",false);
				}
			}
			
		}
		
	}
	
	/* 判断父菜单是否被选中,从而子菜单是否全部被选中  */
	function chek(id){
		var i = $("#"+id).next().next().attr("id");
		if($("#"+id).is(":checked")){
			$("#"+id).next().next().children().addClass("check");
			$("#"+i+" li.check input").prop("checked",true);
			
		}else if(!$("#"+id).is(":checked")){
			$("#"+i+" li.check input").prop("checked",false);
			$("#"+id).next().next().children().removeClass("check");
		}
	}
	
	/* ajax将用户拥有的权限标记 */
	function getRole(){
		$.ajax({
			type:"get",
			url:"ajaxlimit",
			data:"role="+role+"",
			success:function(e){
				if(e.length!=0&&e!=null){
					limit=e.split(",");
					var idarr = document.getElementsByName("ck");
					for(var i=0;i<idarr.length;i++){
						for(var j=0;j<limit.length;j++){
							if(parseInt(idarr[i].value)==parseInt(limit[j])){
								idarr[i].checked="checked";
								$(idarr[i]).parent().addClass("check");
							}
						}
					}
				}else{
					var idarr = document.getElementsByName("ck");
					for(var i=0;i<idarr.length;i++){
						idarr[i].checked="";
					}
				}
				
			}
		});
	}
	
	/* 获取用户重新分配的权限id */
	function getId(){
		if(role!=null&&role.length!=0){
			var arr=document.getElementsByName("ck");
			/* 如果选中了哪一项，就获取它的value */
			for(var i=0;i<arr.length;i++){
				if(arr[i].checked){
					allot+=arr[i].value+",";
				}
			}
		}
	}
	
	/* 分配权限ajax */
	function getAllot(){
		$.ajax({
			type:"get",
			url:"ajaxlimitallot",
			data:"allot="+allot+"&role="+role+"",
			success:function(e){
				if(e=='true'){
					$("#dialog").css("display","block");
				}
			}
		});
	}
</script>
</head>
<body>
	<div class="contentdiv" style="width:1250px;">
		<div class="top">
			<i class="iconfont icon-jibenshezhi"></i> <span> 权限分配</span>
		</div>
		<div class="center" style="width:1250ox;height:655px;">
			<div class="centertop">
				<div>
					<select id="sel">
						<option value="0">--请选择--</option>
						<c:forEach items="${relst }" var="re">
							<option value="${re.rolename}">${re.rolename}</option>
						</c:forEach>
					</select>
				</div>
				<div>
					<input type="button" value="分配" id="allot" class="pointer" onclick="getId();getAllot();"/>
				</div>
				<div>
					<input type="button" value="全部打开" id="open" class="pointer"/>
				</div>
				<div class="find">
					<input type="button" value="全部关闭" id="close" class="pointer"/>
				</div>
			</div>
			<div class="menuTree">
				<ul id="dropdown4">
					<li><input type="checkbox"  name="ck" value="1" onclick="chek(id)" id="bas"/> <a
						href="javascript:void(0);" id="base" onclick="change(id)">基本设置</a>
						<ul id="base1" class="dis">
							<li><input type="checkbox"  name="ck" value="11" onclick="chekchil(this)"/> <a
								href="javascript:void(0);">系统幻灯片</a></li>
							<li><input type="checkbox"  name="ck" value="12" onclick="chekchil(this)"/> <a
								href="javascript:void(0);">信息模板</a></li>
							<li><input type="checkbox"  name="ck" value="13" onclick="chekchil(this)"/> <a
								href="javascript:void(0);">友情链接</a></li>
							<li><input type="checkbox"  name="ck" value="14" onclick="chekchil(this)"/> <a
								href="javascript:void(0);">邮箱设置</a></li>
							<li><input type="checkbox"  name="ck" value="15" onclick="chekchil(this)"/> <a
								href="javascript:void(0);">网站基本信息配置</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="2" onclick="chek(id)" id="com"/> <a
						href="javascript:void(0);" id="company" onclick="change(id)">公司动态</a>
						<ul id="company1" class="dis">
							<li><input type="checkbox"  name="ck" value="16" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">公司新闻</a></li>
							<li><input type="checkbox"  name="ck" value="17" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">公司活动</a></li>
							<li><input type="checkbox"  name="ck" value="18" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">司机风采</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="3" id="men" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="menu" onclick="change(id)">菜单模块</a>
						<ul id="menu1" class="dis">
							<li><input type="checkbox"  name="ck" value="19" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">前台导航</a></li>
							<li><input type="checkbox"  name="ck" value="20" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">后台菜单</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="4" id="lim" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="limit" onclick="change(id)">权限管理</a>
						<ul id="limit1" class="dis">
							<li><input type="checkbox"  name="ck" value="21" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">管理员</a></li>
							<li><input type="checkbox"  name="ck" value="22" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">角色管理</a></li>
							<li><input type="checkbox"  name="ck" value="23" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">权限分配</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="5" id="ord" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="order" onclick="change(id)">订单管理</a>
						<ul id="order1" class="dis">
							<li><input type="checkbox"  name="ck" value="24" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">顺风车</a></li>
							<li><input type="checkbox"  name="ck" value="25" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">企业租车</a></li>
							<li><input type="checkbox"  name="ck" value="26" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">自驾租车</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="6" id="use" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="user" onclick="change(id)">用户管理</a>
						<ul id="user1" class="dis">
							<li><input type="checkbox"  name="ck" value="27" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">普通用户</a></li>
							<li><input type="checkbox"  name="ck" value="28" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">企业用户</a></li>

						</ul></li>
					<li><input type="checkbox"  name="ck" value="7" id="doo" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="door" onclick="change(id)">门店管理</a>
						<ul id="door1" class="dis">
							<li><input type="checkbox"  name="ck" value="29" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">员工管理</a></li>
							<li><input type="checkbox"  name="ck" value="30" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">门店分店管理</a></li>

						</ul></li>
					<li><input type="checkbox"  name="ck" value="8" id="ca" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="car" onclick="change(id)">车辆管理</a>
						<ul id="car1" class="dis">
							<li><input type="checkbox"  name="ck" value="31" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">顺风车管理</a></li>
							<li><input type="checkbox"  name="ck" value="32" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">企业车队管理</a></li>
							<li><input type="checkbox"  name="ck"/ value="33" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">普通车辆管理</a></li>
								<li><input type="checkbox"  name="ck"/ value="43" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">车型管理</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="9" id="w" onclick="chek(id)"/> <a
						href="javascript:void(0);" id="we" onclick="change(id)">关于我们</a>
						<ul id="we1" class="dis">
							<li><input type="checkbox"  name="ck" value="34" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">公司简介</a></li>
							<li><input type="checkbox"  name="ck" value="35" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">联系我们</a></li>
							<li><input type="checkbox"  name="ck" value="36" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">愿景与使命</a></li>
							<li><input type="checkbox"  name="ck" value="37" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">公司大事记</a></li>
							<li><input type="checkbox" name="ck" value="38" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">公司荣誉</a></li>
							<li><input type="checkbox"  name="ck" value="39" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">合作伙伴</a></li>
						</ul></li>
					<li><input type="checkbox"  name="ck" value="10" id="hel" /> <a
						href="javascript:void(0);" id="help" onclick="change(id)">帮助中心</a>
						<ul id="help1" class="dis">
							<li><input type="checkbox"  name="ck" value="40" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">常见问题</a></li>
							<li><input type="checkbox"  name="ck" value="41" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">新手教程</a></li>
							<li><input type="checkbox"  name="ck" value="42" onclick="chekchil(this)"/> <a
								href="javascript:void(0)">服务规则</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="dialog" id="dialog">
		<div class="suc">
			<h3>提示</h3>
			<span>分配成功，请重新登录！</span>
			<input type="button" value="关闭" id="warn">
		</div>
	</div>
</body>
</html>